<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<title>电影</title>
		<meta name="description" content="Free Bootstrap 4 Theme">
		<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">

            <!-- Favicons -->
        <link href="../static/assets/img/tubiao.png" rel="icon">

    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="../static/assets/css/bootstrap.css">
    <link rel="stylesheet" href="../static/assets/css/animate.css">
    <link rel="stylesheet" href="../static/assets/fonts/css/ionicons.min.css">
    <link rel="stylesheet" href="../static/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../static/assets/fonts/flaticon.css">
    <link rel="stylesheet" href="../static/assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="../static/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="../static/assets/css/select2.css">
    <link rel="stylesheet" href="../static/assets/css/helpers.css">
    <link rel="stylesheet" href="../static/assets/css/style4.css">
    <link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/assets/css/style.css" rel="stylesheet">

    <style>
        .transparent-form {
            background-color: rgba(255, 255, 255, 0.2); /* 透明背景 */
            padding: 20px;
            border-radius: 10px;
        }
    </style>

	</head>
	<body>
        <header id="header">
            <div class="container">
              <div class="logo float-left">
                <h1 class="text-light"><a><span>welcome to movies space</span></a></h1>
              </div>

              <nav class="nav-menu float-right d-none d-lg-block">
                <ul>
                  <li><a href="/home/{{ username }}">首页</a></li>
                  <li class="active"><a href="/movie_1/{{ username }}">电影</a></li>
                    <li><a href="/squire/{{ username }}">广场</a></li>
                  <li><a href="/data/{{ username }}">数据表</a></li>
                  <li><a href="/about/{{ username }}">关于我们</a></li>
                  <li><a href="/my/{{ username }}">{{ username }}</a></li>
                </ul>
              </nav><!-- .nav-menu -->
            </div>
          </header><!-- End Header -->

    <section class="probootstrap-cover overflow-hidden relative" style="background-image: url('../static/assets/img/Template/bg_1.jpg');" data-stellar-background-ratio="0.5" id="section-home">
      <div class="overlay"></div>
      <div class="container">
          <form id="searchForm" action="/search/{{ username }}" method="GET" class="probootstrap-form transparent-form">
            <div class="row align-items-center">
              <div class="col-md">
                <h2 class="heading mb-2 display-4 font-light probootstrap-animate">搜索高分劲爆电影-- World</h2>
                <p class="lead mb-5 probootstrap-animate">希望您喜欢! 免费高分电影</p>
                <p class="probootstrap-animate">
                  <button type="submit" role="button" class="btn btn-primary p-3 mr-3 pl-5 pr-5 text-uppercase d-lg-inline d-md-inline d-sm-block d-block mb-3">搜索</button>
                </p>
              </div>
              <div class="col-md probootstrap-animate">
                  <div class="form-group">
                    <div class="row mb-3">
                      <div class="col-md">
                        <div class="form-group">
                          <label for="id_label_single">国家</label>
                          <label for="id_label_single" style="width: 100%;">
                            <select name="country" class="js-example-basic-single js-states form-control" id="id_label_single" style="width: 100%;">
                              <option value="中国">中国</option>
                              <option value="美国">美国</option>
                              <option value="韩国">韩国</option>
                              <option value="日本">日本</option>
                              <option value="英国">英国</option>
                              <option value="印度">印度</option>
                              <option value="法国">法国</option>
                              <option value="其他地区">其他地区</option>
                            </select>
                          </label>
                        </div>
                      </div>
                      <div class="col-md">
                        <div class="form-group">
                          <label for="id_label_single2">年份</label>
                          <div class="probootstrap_select-wrap">
                            <label for="id_label_single2" style="width: 100%;">
                            <select name="year" class="js-example-basic-single js-states form-control" id="id_label_single2" style="width: 100%;">
                              <option value="2024">2024</option>
                              <option value="2023">2023</option>
                              <option value="2022">2022</option>
                              <option value="2021">2021</option>
                              <option value="2020">2020</option>
                              <option value="2015-2019">2015-2019</option>
                              <option value="2010-2014">2010-2014</option>
                              <option value="2000-2009">2000-2009</option>
                              <option value="1990-1999">1990-1999</option>
                              <option value="1980-1989">1980-1989</option>
                              <option value="1970-1979">1970-1979</option>
                              <option value="1950-1969">1950-1969</option>
                              <option value="1919-1949">-1949</option>
                            </select>
                          </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </form>
      </div>
    
    </section>
    <!-- END section -->





    <section id="results" class="probootstrap_section" id="section-city-guides">
      <div class="container">
        <div class="row text-center mb-5 probootstrap-animate">
          <div class="col-md-12">
            <h2 class="display-4 border-bottom probootstrap-section-heading">电影列表</h2>
          </div>
        </div>
        <div class="row">
        {% if movies %}
             {% for movie in movies %}
                 <div class="col-lg-3 col-md-6 probootstrap-animate mb-3">
                    <a href="/movie_detail/{{ username }}/{{ movie[0] }}" class="probootstrap-thumbnail">
                      <img referrerpolicy="no-referrer"  src="{{ movie[2] }}" alt="Free Template" class="img-fluid">
                      <h3>{{ movie[3] }}{{ movie[7] }}</h3>
                    </a>
                  </div>
             {% endfor %}
        {% else %}
            <div class="col-12">
                <h1 class="display-4 border-bottom probootstrap-section-heading">搜索的条件不存在电影!!!</h1>
            </div>
        {% endif %}
                  <!-- END slide item -->
        </div>

      <div class="pagination" id="select">
            {% if page > 1 %}
                <a href="?page=1">&laquo;</a>
                <a href="?page={{ page - 1 }}">&lt;</a>
            {% endif %}

            {% for p in range(1, total_pages + 1) %}
                {% if p == page %}
                    <span class="current" id="pa">{{ p }}</span>
                {% else %}
                    <a href="?page={{ p }}">{{ p }}</a>
                {% endif %}
                {% if not loop.last %}
                    &nbsp; <!-- 添加字符间距 -->
                {% endif %}
            {% endfor %}

            {% if page < total_pages %}
                <a href="?page={{ page + 1 }}">&gt;</a>
                <a href="?page={{ total_pages }}">&raquo;</a>
            {% endif %}
        </div>
      </div>
    </section>

     <section class="probootstrap_section">
      <div class="container">
        <div class="row text-center mb-5 probootstrap-animate">
          <div class="col-md-12">
            <h2 class="display-4 border-bottom probootstrap-section-heading">排名前十高分电影</h2>
          </div>
        </div>

        <div class="row probootstrap-animate">
          <div class="col-md-12">
            <div class="owl-carousel js-owl-carousel-2">
                {% for i in range(10) %}
                  <div>
                    <div class="media probootstrap-media d-block align-items-stretch mb-4 probootstrap-animate">
                      <a href="/movie_detail/{{ username }}/{{ movieTop10[i][0] }}" class="probootstrap-thumbnail">
                      <img  referrerpolicy="no-referrer"  src="{{ movieTop10[i][2] }}" alt="Free Template" class="img-fluid">
                      <div class="media-body">
                        <h5 class="mb-3">{{ movieTop10[i][3] }}</h5>
                        <p>{{ movieTop10[i][7] }}</p>
                        <p style="color: #00CA4C;font-size: 10px">[{{ movieTop10[i][8] }} ]</p>
                      </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
                  <!-- END slide item -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- END section -->


    <section class="probootstrap_section">
      <div class="container">
        <div class="row text-center mb-5 probootstrap-animate">
          <div class="col-md-12">
            <h2 class="display-4 border-bottom probootstrap-section-heading">Travel With Us</h2>
          </div>
        </div>

        <div class="row probootstrap-animate">
          <div class="col-md-12">
            <div class="owl-carousel js-owl-carousel">
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-teatro-de-la-caridad"></span>
                <em>Teatro de la Caridad</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-royal-museum-of-the-armed-forces"></span>
                <em>Royal Museum of the Armed Forces</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-parthenon"></span>
                <em>Parthenon</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-marina-bay-sands"></span>
                <em>Marina Bay Sands</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-samarra-minaret"></span>
                <em>Samarra Minaret</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-chiang-kai-shek-memorial"></span>
                <em>Chiang Kai Shek Memorial</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-heuvelse-kerk-tilburg"></span>
                <em>Heuvelse Kerk Tilburg</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-cathedral-of-cordoba"></span>
                <em>Cathedral of Cordoba</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-london-bridge"></span>
                <em>London Bridge</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-taj-mahal"></span>
                <em>Taj Mahal</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-leaning-tower-of-pisa"></span>
                <em>Leaning Tower of Pisa</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-burj-al-arab"></span>
                <em>Burj al Arab</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-gate-of-india"></span>
                <em>Gate of India</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-osaka-castle"></span>
                <em>Osaka Castle</em>
              </a>
              <a class="probootstrap-slide" href="#">
                <span class="flaticon-statue-of-liberty"></span>
                <em>Statue of Liberty</em>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- END section -->




    
    <script src="../static/assets/js/jquery.min.js"></script>
    
    <script src="../static/assets/js/popper.min.js"></script>
    <script src="../static/assets/js/bootstrap.min.js"></script>
    <script src="../static/assets/js/owl.carousel.min.js"></script>

    <script src="../static/assets/js/bootstrap-datepicker.js"></script>
    <script src="../static/assets/js/jquery.waypoints.min.js"></script>
    <script src="../static/assets/js/jquery.easing.1.3.js"></script>

    <script src="../static/assets/js/select2.min.js"></script>

    <script src="../static/assets/js/main2.js"></script>



    <script>
      // 等待页面加载完成
      window.addEventListener('load', function() {
        // 获取目标部分的 DOM 元素
        var targetSection = document.getElementById('select');
        // 获取包含页码的元素
        var element = document.getElementById('pa');
        // 解析页码为整数类型
        var page = parseInt(element.textContent || element.innerText);
        // 如果目标部分存在且页码不为1
        if (targetSection && page !== 1) {
          // 使用 smooth 滚动到目标部分
          targetSection.scrollIntoView({ behavior: 'smooth' });
        }
      });


      document.getElementById('searchForm').addEventListener('submit', function(event) {
        // 获取表单的action属性
        var action = this.action;
        // 为action属性添加锚点
        this.action = action + '#results';
      });

    </script>
	</body>
</html>